Public
Edited
Apr 8, 2022
74 forks
Importers
252 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {vl} from '@vega/vega-lite-api-v5'
Insert cell
Insert cell
import {printTable} from '@uwdata/data-utilities'
Insert cell
Insert cell
Insert cell
data = require('vega-datasets@1') // import vega_datasets
Insert cell
cars = data['cars.json']() // load and parse cars data
Insert cell
printTable(cars.slice(0, 5)) // display the first five rows
Insert cell
Insert cell
data['cars.json'].url
Insert cell
Insert cell
Insert cell
df = [
{"city": "Seattle", "month": "Apr", "precip": 2.68},
{"city": "Seattle", "month": "Aug", "precip": 0.87},
{"city": "Seattle", "month": "Dec", "precip": 5.31},
{"city": "New York", "month": "Apr", "precip": 3.94},
{"city": "New York", "month": "Aug", "precip": 4.13},
{"city": "New York", "month": "Dec", "precip": 3.58},
{"city": "Chicago", "month": "Apr", "precip": 3.62},
{"city": "Chicago", "month": "Aug", "precip": 3.98},
{"city": "Chicago", "month": "Dec", "precip": 2.56},
];
Insert cell
Insert cell
Insert cell
vl.markPoint()
.data(df)
.render()
Insert cell
Insert cell
Insert cell
vl.markPoint()
.data(df)
.encode(vl.y().field('city').type('nominal'))
.render()
Insert cell
Insert cell
vl.markPoint()
.data(df)
.encode(vl.y().fieldN('city'))
.render()
Insert cell
Insert cell
vl.markPoint()
.data(df)
.encode(
vl.x().fieldQ('precip'),
vl.y().fieldN('city')
)
.render()
Insert cell
Insert cell
Insert cell
vl.markPoint()
.data(df)
.encode(
vl.x().average('precip'),
vl.y().fieldN('city')
)
.render()
Insert cell
Insert cell
Insert cell
vl.markBar()
.data(df)
.encode(
vl.x().average('precip'),
vl.y().fieldN('city')
)
.render()
Insert cell
Insert cell
vl.markBar()
.data(df)
.encode(
vl.y().average('precip'),
vl.x().fieldN('city')
)
.render()
Insert cell
Insert cell
vl.markPoint({color: 'firebrick'})
.data(df)
.encode(
vl.x().fieldQ('precip').scale({type: 'log'}).title('Log-Scaled Precipitation'),
vl.y().fieldN('city').title('City')
)
.render()
Insert cell
Insert cell
Insert cell
vl.markLine()
.data(cars)
.encode(
vl.x().fieldT('Year'),
vl.y().average('Miles_per_Gallon')
)
.render()
Insert cell
Insert cell
{
const line = vl.markLine().data(cars).encode(
vl.x().fieldT('Year'),
vl.y().average('Miles_per_Gallon')
);

const point = vl.markCircle().data(cars).encode(
vl.x().fieldT('Year'),
vl.y().average('Miles_per_Gallon')
);
return vl.layer(line, point).render();
}
Insert cell
Insert cell
{
const mpg = vl.markLine().data(cars).encode(
vl.x().fieldT('Year'),
vl.y().average('Miles_per_Gallon')
);

return vl.layer(mpg, mpg.markCircle()).render();
}
Insert cell
Insert cell
{
const mpg = vl.markLine().data(cars).encode(
vl.x().fieldT('Year'),
vl.y().average('Miles_per_Gallon')
);
const hp = mpg.encode(vl.y().average('Horsepower'));

return vl.hconcat(
vl.layer(mpg, mpg.markCircle()),
vl.layer(hp, hp.markCircle())
).render();
}
Insert cell
Insert cell
Insert cell
vl.markPoint().data(cars).encode(
vl.x().fieldQ('Horsepower'),
vl.y().fieldQ('Miles_per_Gallon'),
vl.color().fieldN('Origin'),
vl.tooltip(['Name', 'Origin']) // show the Name and Origin fields in a tooltip
).render()
Insert cell
Insert cell
{
// create an interval selection over an x-axis encoding
const brush = vl.selectInterval().encodings('x');
// determine opacity based on brush
const opacity = vl.opacity().if(brush, vl.value(0.9)).value(0.1);

// an overview histogram of cars per year
// add the interval brush to select cars over time
const overview = vl.markBar()
.encode(
vl.x().fieldO('Year').timeUnit('year') // extract year unit, treat as ordinal
.axis({title: null, labelAngle: 0}), // no title, no label angle
vl.y().count().title(null), // counts, no axis title
opacity // modulate bar opacity based on the brush selection
)
.params(brush) // add interval brush selection to the chart
.width(400) // use the full default chart width
.height(50); // set chart height to 50 pixels
// a detail scatterplot of horsepower vs. mileage
const detail = vl.markPoint()
.encode(
vl.x().fieldQ('Horsepower'),
vl.y().fieldQ('Miles_per_Gallon'),
opacity // modulate point opacity based on the brush selection
);

// vertically concatenate (vconcat) charts
return vl.data(cars).vconcat(overview, detail).render();
}
Insert cell
Insert cell
{
const plot = vl.markCircle().encode(
vl.x().average('precip'),
vl.y().fieldN('city')
);
return html`<pre>${JSON.stringify(plot.toObject(), 0, 2)}</pre>`; // format JSON data
}
Insert cell
Insert cell
{
const plot = vl.markCircle().encode({
x: {field: 'precip', type: 'quantitative', aggregate: 'average'},
y: {field: 'city', type: 'nominal'}
});
return html`<pre>${JSON.stringify(plot.toObject(), 0, 2)}</pre>`; // format JSON data
}
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more